<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <title>节目下载详情</title>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
    <style>
        .table-info p {
            display: inline-block;
            color: #3DD49A;
            padding-right: 10px;
        }
    </style>
</head>

<body>

<div class="app-page">

    <div class="app-page-content">

        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">
                    <!-- 过滤器 -->
                    <form class="filter">

                        <div class="filter-item form-item row">
                            <div class="label"><label>终端序列号</label></div>
                            <div class="flex1">
                                <input type="text" placeholder="终端序列号" name="deviceCode" th:value="${deviceCode}">
                                <input type="hidden" name="programVersion" th:value="${programVersion}">
                            </div>
                        </div>
                        <div class="filter-item form-item row">
                            <div class="filter-btn z-df">
                                <button class="z-btn z-primary">查询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">

                    <div class="z-btn-group z-ta-r">
                        <button class="j-btn-control z-btn z-default del">删除</button>
                    </div>

                    <table class="z-table">
                        <thead>
                        <th>
                            <input type="checkbox" class="input j-checkbox-all">
                        </th>
                        <th>终端序列号</th>
                        <th>所属分组</th>
                        <th>省</th>
                        <th>市</th>
                        <th>区</th>
                        <th>完成时间</th>
                        <th>过期时间</th>
                        <th>下载状态</th>
                        </thead>
                        <tbody>

                        <tr th:each="device: ${result}"
                            th:attr="
                            data-device-code=${device.deviceCode},
                            data-device-mac=${device.deviceMac},
                            data-group-name=${device.groupName},
                            data-province=${device.province},
                            data-city=${device.city},
                            data-area=${device.area},
                            data-update-time=${device.updateTime},
                            data-overdue-time=${device.overdueTime},
                            data-download-status=${device.downloadStatus},
                            data-download-fail-reason=${device.downloadFailReason}">
                            <td>
                                <input type="checkbox" class="input j-checkbox">
                            </td>
                            <td><a th:text="${device.deviceCode}"
                                   onclick="showDeviceDetail(this)"></a></td>
                            <td th:text="${device.groupName}"></td>
                            <td th:text="${device.province}"></td>
                            <td th:text="${device.city}"></td>
                            <td th:text="${device.area}"></td>
                            <td th:text="${device.updateTime}"></td>
                            <td th:text="${device.overdueTime}"></td>
                            <td class="btn-group" th:if="${device.downloadStatus == '失败'}">
                                <a onclick="showFailReason(this)"
                                   th:attr="data-download-fail-reason=${device.downloadFailReason}">失败</a>
                            </td>
                            <td th:if="${device.downloadStatus == '成功' || device.downloadStatus == '下载中'}">
                                <span th:text="${device.downloadStatus}"></span>
                            </td>
                            <td th:if="${device.downloadStatus == '' || device.downloadStatus == null}">
                                <span>未开始</span>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <!-- 分页 -->
                    <div class="clearfix">
                        <div class="table-info z-pat z-fl">
                            总计：<p class="total" th:text="${countResult.totalCount}"></p>
                            未开始：<p class="online" th:text="${countResult.notBeginCount}"></p>
                            正在下载：<p class="online" th:text="${countResult.downloadingCount}"></p>
                            已下载：<p class="offline" th:text="${countResult.successCount}"></p>
                            下载失败：<p class="offline" th:text="${countResult.failCount}"></p>
                        </div>
                        <div class="pagination z-pat z-fr"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script>

    var context = $("meta[name='ctx']").attr("content") || '';
    var pageNum = [[${pageNum}]];
    var pageSize = [[${pageSize}]];
    var total = [[${total}]];
    var deviceCode = '[[${deviceCode}]]';
    var programVersion = '[[${programVersion}]]';

    $(function () {

        eventEmit()
    })

    function eventEmit() {

        $('.del').click(function () {
            var deviceCodes = getSelecteDeviceCodes();
            if (!isParamOk(programVersion)) {
                popup.tipsTop("节目版本号错误，请联系管理员", 'warning');
                return;
            }
            if (!isParamOk(deviceCodes)) {
                popup.tipsTop("请选择终端", 'warning');
                return;
            }
            if (confirm('确定删除？')) {
                $.ajax({
                    type: "POST",
                    url: context + "/cpProgram/batchDeleteDeviceFromProgram",
                    data: {
                        programVersion: programVersion,
                        deviceCodes: deviceCodes
                    },
                    dataType: "json",
                    async: false,
                    success: function (result) {
                        if (result.code === 0) {
                            popup.tipsTop(result.msg, 'success');
                            setTimeout(function () {
                                if (parent) {
                                    parent.location.href = parent.location.href;
                                } else {
                                    window.location.href = context + "/cpProgram/listByPage";
                                }

                            }, 500);
                        } else {
                            popup.tipsTop(result.msg, 'error');
                        }
                    }
                });
            }
        })
    }

    // 加载select联动内容
    $('[name="searchType"] option').each(function (index, element) {
        if ((App.query.searchType === undefined && index === 0) || App.query.searchType == $(this).val()) {
            $('.j-option-switch .content').html($(".search").children('div').eq(index).html())
        }
    })

    // 从URL加载搜索数据
    $(".filter").formLoad(App.query);

    // 后台渲染分页 - 补全url参数(后台传参可以忽略)
    $(".pagination a").each(function () {
        $(this).attr("href", $(this).attr("href") + location.search)
    });

    // 获取表格中选择的终端序列号
    function getSelecteDeviceCodes() {
        let temp = [];
        $('tbody [type="checkbox"]').each(function (index, element) {
            if (element.checked == true) {
                temp.push($(this).parents('tr,.tr').data('device-code'));
            }
        })
        return temp.join(',');
    }

    var pagination = new Pagination(".pagination", {
        pageIndex: pageNum, // 当前页数
        pageSize: pageSize, // 每页数量
        count: total, // 总条数
        maxButtonCount: 5, // 分页按钮数量(可选)
        // 分页切换事件
        onPageChanged: function (pageIndex) {
            var param = createQueryParam(pageIndex, pageSize);
            window.location.href = context + "/cpProgram/listProgramDeviceByPage" + isParamOk(param) ? "?" + param : "";
        }
    })

    function isParamOk(param) {
        if (null == param) {
            return false;
        }
        if ('' === param) {
            return false;
        }
        if (undefined === param) {
            return false;
        }
        return true;
    }

    /**
     * 拼接请求参数
     * @param pageNum
     * @param pageIndex
     */
    function createQueryParam(pageIndex, pageSize) {
        var param = '';
        if (isParamOk(pageSize)) {
            param += "&pageSize=" + pageSize;
        }
        if (isParamOk(pageIndex)) {
            param += "&pageNum=" + pageIndex;
        }
        if (isParamOk(deviceCode)) {
            param += "&deviceCode=" + deviceCode;
        }
        if (isParamOk(programVersion)) {
            param += "&programVersion=" + programVersion;
        }
        if (isParamOk(param)) {
            param = param.substring(1);
        }
        return param;
    }

    /**
     * 显示下载失败原因
     * @param btn
     */
    function showFailReason(btn) {
        var data = btn.dataset;
        var downloadFailReason = data.downloadFailReason;
        layer.open({
            type: 0,
            skin: 'layui-layer-demo', //样式类名
            closeBtn: 0, //不显示关闭按钮
            anim: 2,
            area: ['420px', '240px'], //宽高
            shadeClose: true, //开启遮罩关闭
            content: downloadFailReason
        });
    }

    /**
     * 显示终端详情
     * @param btn
     */
    function showDeviceDetail(btn) {
        if (isParamOk(btn)) {
            var deviceCode = $(btn).parents('tr,.tr').data('device-code');
            layer.open({
                type: 2 //此处以iframe举例
                , title: '终端详情'
                , area: ['100%', '100%']
                , content: context + '/ckDeviceInfo/deviceDetail?deviceCode=' + deviceCode
            })
        }
    }
</script>
</body>

</html>